<template>
	<view class="content">
		<view class="logo">
			<image src="@/static/logo.png" mode="widthFix"></image>
		</view>

		<view class="uni-common-mt">
			<view class="login-title">欢迎使用动力源运维助手</view>
			<view class="tips">
				（仅限内部管理端账号使用！！）
			</view>
			<view class="equip-item">
				<text :class="['single',{'isActive':currentType.code == item.code}]"
					v-for="(item,index) in EQUIP_CLASSIFY" :key="index" @click="equipChange(item)">
					{{item.label}}
					<text class="badge" v-show="currentType.code == item.code">√️</text>
				</text>
			</view>
			<view class="uni-form-item">
				<input v-model="form.username" class="uni-input-login" placeholder="请输入用户名"
					placeholder-style="color:#999999;font-size:28rpx" maxlength="20" />
				<uni-icons v-if="form.username" class="clear-icon" type="close" size="18" color="#666"
					@click="form.username=''"></uni-icons>
			</view>
			<view class="uni-form-item">
				<input v-model="form.password" @input="onPasswordInput('password')" class="uni-input-login" :password="!showPassword"
					placeholder="请输入密码" placeholder-style="color:#999999;font-size:28rpx" maxlength="20" />
				<uni-icons v-if="form.password" class="clear-icon pwd-clear-icon" type="close" size="18" color="#666"
					@click="form.password='';showPassword=false"></uni-icons>
					
				<uni-icons v-if="form.password" class="eye-icon" :type="!showPassword?'eye':'eye-slash'" size="20"
					color="#666" @click="changePassword"></uni-icons>
			</view>
		</view>
		<view class="login-btn">
			<button :loading="loginLoading" type="primary" @click="doLogin()">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/my.js';
	import {
		EQUIP_CLASSIFY
	} from "@/common/config.js";
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				loginLoading: false,
				EQUIP_CLASSIFY: EQUIP_CLASSIFY,
				currentType: {},
				code: null, //jsCode
				showPassword: false, //密码显示
			}
		},
		onLoad() {
			uni.clearStorageSync();
			if (this.EQUIP_CLASSIFY.length > 0) {
				this.currentType = this.EQUIP_CLASSIFY[0];
			}
		},
		methods: {
			equipChange(item) {
				this.currentType = item;
			},
			// 登录
			doLogin() {
				if (!this.form.username) {
					this.$Toast.none('请输入用户名');
					return;
				} else if (!this.form.password) {
					this.$Toast.none('请输入密码');
					return;
				}
				this.$Toast.loading('登录中');

				uni.login({
					provider: 'weixin',
					success: succ => {
						this.code = succ.code;
						this.isLogin();
					},
					complete: comt => {}
				});

			},
			isLogin() {
				login(`/v2/login?jsCode=${this.code}&loginname=${this.form.username}&password=${this.form.password}`,
						'post').then(res => {
						if (res.code == 200) {
							this.$Toast.success('登录成功');
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('userId', res.data.id);

							// 登录成功后保存设备类型code
							uni.setStorageSync('equipTypeCode', this.currentType.code);
							this.$store.commit('SET_EQUIP_TYPE_CODE', this.currentType.code);
							
							uni.reLaunch({
								url: '/pages/startMin/index'
							});
						}
					})
					.catch(err => {

					})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onPasswordInput(type){
				setTimeout(() => {
					this.form[type] = this.form[type].replace(/\s+/g, '');
					this.form[type] = this.form[type].replace(/[\u4E00-\u9FA5]/g,'')
				}, 10)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common";

	.logo {
		text-align: center;

		image {
			width: 120rpx;
			margin-bottom: 10rpx;
		}
	}

	.content {
		margin: 0 auto;
		background-color: #FFFFFF;
		padding: 50rpx 40rpx;
	}

	.login-title {
		font-size: 46rpx;
		color: $primary-color;
		font-weight: 600;
		text-align: center;
		letter-spacing: 4rpx;
	}

	.tips {
		color: $primary-color;
		text-align: center;
		font-size: 30rpx;
	}

	.uni-form-item {
		position: relative;
		margin: 30rpx 0;
		background: #F4F4F4;
		border-radius: 42rpx;

		.uni-input-login {
			width: 80%;
			padding: 24rpx 40rpx;
		}

		.clear-icon,
		.eye-icon {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 14rpx;
			top: 20rpx;
			z-index: 9;
		}

		.pwd-clear-icon {
			right: 65rpx;
			top: 22rpx;
		}
	}

	.login-btn {
		margin: 80rpx 0;

		button {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			background: $primary-color;
			border-radius: 36rpx;
		}
	}

	button::after {
		border: none;
	}

	.equip-item {
		@include flexLayout(center, space-around);
		margin: 160rpx 0 80rpx;

		.single {
			width: 34%;
			position: relative;
			border: 2rpx solid $primary-color;
			border-radius: 10rpx;
			height: 120rpx;
			line-height: 120rpx;
			padding: 10rpx 30rpx;
			font-size: 36rpx;
			color: #ffffff;
			text-align: center;
			color: #666;
		}

		/* 选中后的样式 */
		.isActive {
			border-color: $primary-color;
			// background: linear-gradient($primary-color, #FCB884);
			background: $secondary-color;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			color: #FFFFFF;
			font-weight: 500;
		}

		.badge {
			position: absolute;
			top: -46rpx;
			right: -2px;
		}
	}
</style>